<template>
	<div class="tag">
		<el-card class="box-card">
			<div slot="header" class="d-flex align-items-center">
				<img class="card-icon" src="../assets/biaoqian.png" />
				<span>{{$t('tag.tag')}}</span>
			</div>
			<div class="text item">
				<el-tag size="mini" class="tag-item" @click="myTag('Java')">Java[12]</el-tag>
				<el-tag size="mini" class="tag-item" type="success" @click="myTag('SpringBoot')">SpringBoot[8]</el-tag>
				<el-tag size="mini" class="tag-item" type="info" @click="myTag('HTML')">HTML[8]</el-tag>
				<el-tag size="mini" class="tag-item" type="warning" @click="myTag('Mysql')">Mysql[5]</el-tag>
				<el-tag size="mini" class="tag-item" type="danger" @click="myTag('Vue')">Vue[3]</el-tag>
				<el-tag size="mini" class="tag-item" type="info" @click="myTag('jQuery')">jQuery[6]</el-tag>
				<el-tag size="mini" class="tag-item" type="success" @click="myTag('SpringCloud')">SpringCloud[9]</el-tag>
				
				<el-tag v-for="tag in tags_list" :key="tag.id" size="mini" class="tag-item" type="success" @click="myTag(tag.name)">{{ tag.name }}</el-tag>
				
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'tag',
		data(){
			return {
				tags_list: []
			}
		},
		mounted(){
			this.tagList();
		},
		methods: {
			tagList(){
				this.$http.get('http://127.0.0.1:8006/article/tags/')
				.then(res=>{
					this.tags_list = res.data.results;
					console.log(res.data);
				})
				.catch(err=>{
					console.log(err);
				})
			},
			myTag(name) {
				console.log(name);
				this.$router.push({
					name: 'tag',
					params: {
						'name': name
					}
				});
			}
		}
	}
</script>

<style scoped>
	.box-card .item:hover {
		color: #409EFF;
		cursor: pointer;
	}
	
	.box-card span {
		font-weight: bold;
	}
	
	.card-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	
	.tag-item {
		margin-right: 10px;
	}
</style>